<template>
  <div class="croncongfig">
    <!--cron表达式 -->
    <div class="con">
         <div class="btn-left">
           <span  v-for="item in navList" :key="item.id" :class="{'active':navNum2 == item.name}" @click="navNum2 = item.name">{{item.name}}</span>
        </div>
        <div class="choise">
             <div class="choisecon">
                <div class="radioitem">
                    <el-radio v-model="secondRadio" label="1">不指定</el-radio>
                    <div class="myiuputs">
                         <!-- <span class="inputname">不指定</span> -->
                    </div>
                  </div>
                  <div class="radioitem">
                    <el-radio v-model="secondRadio" label="2">指定</el-radio>
                    <div class="myiuputs">
                        <!-- <span class="inputname" style="margin-right:20px">指定</span> -->
                         <span class="inputname" v-show="navNum2 != '周(星期)'">每</span>
                         <el-input v-model="secondInput" style="width:100px" v-show="navNum2 != '周(星期)'"></el-input>
                         <span class="inputname" v-show="navNum2 != '周(星期)'">{{navNum2}}执行一次</span>
                    </div>
                  </div>
                  <!-- <div class="radioitem">
                     <el-radio v-model="secondRadio" label="3"></el-radio>
                    <div class="myiuputs">
                         <span class="inputname" style="margin-right:20px">自定义</span>
                         <el-input v-model="secondInput" style="width:100px"></el-input>
                         <span class="inputname">至</span>
                         <el-input v-model="secondInput" style="width:100px"></el-input>

                    </div>
                  </div> -->
                  <div class="appointlist" v-show="navNum2 == '周(星期)'">
                        <el-checkbox v-for="item in secondAppoint" :key="item.checkname" v-model="item.checked" >{{item.checkname}}</el-checkbox>
                  </div>
                 
             </div>
        </div>
        <!-- <div class="expression">
             <div class="mytitle">表达式<span></span></div>
             <div class="fieldmy">表达式字段：</div>
             <div class="fieldbox">
                  <div class="fielditem">
                      <el-input v-model="fieldSecond" style="width:120px" disabled></el-input>
                      <div class="miaoshu">秒</div>
                  </div>
                  <div class="fielditem">
                      <el-input v-model="fieldMinute" style="width:120px" disabled></el-input>
                      <div class="miaoshu">分钟</div>
                  </div>
                  <div class="fielditem">
                      <el-input v-model="fieldHour" style="width:120px" disabled></el-input>
                      <div class="miaoshu">小时</div>
                  </div>
                  <div class="fielditem">
                      <el-input v-model="fieldDay" style="width:120px" disabled></el-input>
                      <div class="miaoshu">日</div>
                  </div>
                  <div class="fielditem">
                      <el-input v-model="fieldMonth" style="width:120px" disabled></el-input>
                      <div class="miaoshu">月份</div>
                  </div>
                  <div class="fielditem">
                      <el-input v-model="fieldWeek" style="width:120px" disabled></el-input>
                      <div class="miaoshu">周(星期)</div>
                  </div>
             </div>
              <div class="fieldmy">Cron表达式：</div>
               <el-input v-model="CronField" style="width:100%"></el-input>
        </div> -->
    </div>
    
  </div>
</template>

<script>
export default {

  data() {
    return {
      navNum2:"秒",
      navList:[
        {
            name:"秒",
            id:"1"
        },
        {
            name:"分钟",
            id:"2"
        },
        {
            name:"小时",
            id:"3"
        },
        {
            name:"日",
            id:"4"
        },
        {
            name:"月份",
            id:"5"
        },
        {
            name:"周(星期)",
            id:"6"
        },
      ],
      fieldSecond:"",
      fieldMinute:"",
      fieldHour:"",
      fieldDay:"",
      fieldMonth:"",
      fieldWeek:"",
      CronField:"",//表达式
      //秒
      secondRadio:"1",
      secondInput:"",
      secondAppoint:[],

    };
  },

  mounted() {
     this.secondAppoint = []
     for(let i = 0;i <= 7; i++){
        this.secondAppoint.push({
            // checkname: i < 10 ? '0'+i : i,
            checkname:  i,
            checked:false
        })
     }
  },

  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
.croncongfig {
      .con {
         width: 100%;
         height: 100%;
         background-color: #fff;
         padding: 20px 30px;
         box-sizing: border-box;
         .choise {
             margin-top: 20px;
         }
         .radioitem {
             display: flex;
             align-items: center;
             margin-top: 12px;
             :deep(.el-radio__label) {
                //  display: none;
                font-size: 14px !important;
                padding-left: 10px;
                position: relative;
                top: 2px;
                color: #1A1A1A;
             }
             :deep(.el-radio__input.is-checked+.el-radio__label) {
                 color: #368ed9;
             }
             .myiuputs {
                 display: flex;
                 align-items: center;
                 .inputname {
                     white-space: nowrap;
                     margin: 0px 5px;
                     font-size: 14px;
                 }
                 :deep(.el-input__inner) {
                      height: 28px;
                      line-height: 28px;
                 }
             }
            
         }
        .appointlist {
                 width: 500px;
                 height: 200px;
                 margin-top: 12px;
                 display: flex;
                 flex-wrap: wrap;
        }
        .expression {
             margin-top: 20px;
             .mytitle {
                 font-size: 20px;
                 display: flex;
                 align-items: center;
                 span {
                     display: inline-block;
                     flex: 1;
                     height: 1px;
                     background-color: #E6E6E6;
                     margin-left: 12px;
                 }
             }
             .fieldmy {
                 font-size: 14px;
                 margin-top: 12px;
             }
             .fieldbox {
                 width: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 .fielditem {
                      display: flex;
                      align-items: center;
                      margin-top: 10px;
                      margin-right: 20px;
                      :deep(.el-input__inner ){
                        height: 30px;
                         line-height: 30px;
                      }
                      .miaoshu {
                         padding: 0px 15px;
                         height: 30px;
                         line-height: 30px;
                         background-color: #368ed9;
                         color: #fff;
                         border-radius: 0px 4px 4px 0px;
                      }
                 }
             }
        }
        .btn-left {
              display: flex;
              align-items: center;
              margin-top: 12px;
                span {
                  width: 70px;
                  height: 34px;
                  text-align: center;
                  line-height: 34px;
                  box-sizing: border-box;
                  display: inline-block;
                  border: 1px solid #ccc;
                  cursor: pointer;
                  &.active {
                    background-color: #368ed9;
                    color: #fff;
                  }
                  
                }
                .zhuyao {
                   border-left-color: transparent;
                   border-right-color: transparent;
                }
                .ciyao {
                  margin-left: 50px;
                }
        }
      }
}
  
</style>